<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="report_header_left"></div>
          <div style="display: flex;align-items: center;">
            <div class="report_header_date">
              <el-date-picker
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query">
                <el-select style="width: 100%;" v-model="memberName1" :filter-method="remoteMethod" value-key="id"
                           filterable placeholder="请选择客户"
                           clearable
                           @change="selectMember1">
                  <el-option
                    style="width: 600px;"
                    v-for="item in memberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item">
                    <div style="display: flex">
                      <span style="width: 60px;">{{item.code}}</span>
                      <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>
                      <div style="width: 200px;">
                        <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>
                      </div>
                    </div>
                  </el-option>
                  <div style="height: 30px"></div>
                </el-select>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
            <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-input placeholder="客户编号/订单号/收货地址" v-model="query.information" clearable></el-input>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="queryClick">查询
            </el-button>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="Rechargeclick">充值
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="pd10">
      <el-tabs type="border-card" v-model="activeName"  @tab-click="tabsClick" :style="obtain==true?{height:(curHeight-120)+'px'}:{height:curHeight+'px'}">
        <el-tab-pane label="全部订单" name="全部订单">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list3']" :style="{height:tabsHeight+'px'}" >
            <orderList :orderForm="orderForm" @detailsClick="detailsClick" ></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane  name="待审核">
           <span slot="label">
          <span class="span-box">
            <span>待审核</span>
          </span>
        </span>
          <div class="details_card" v-loadMore="[payLoads,'order-list6']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已确认" name='已确认'>
          <div class="details_card" v-loadMore="[payLoads,'order-list5']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="已完成">
          <div class="details_card" v-loadMore="[payLoads,'order-list4']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="已关闭">
          <div class="details_card" v-loadMore="[payLoads,'order-list5']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="新增商品"
      :visible.sync="orderVisible"
      width="950px"
      v-el-drag-dialog
      :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
     <el-footer class="el-footerBox" style="margin-bottom: auto">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="totalOrder"></pagination>
    </el-footer>
      <el-dialog
        title="请充值"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
            <div class="Recharge">
                <el-form ref="Recharge" :model="Recharge" :rules="rules" label-width="80px">
                  <el-form-item label="账号" v-if="Account">
                    <span>{{Account}}</span>
                  </el-form-item>
                  <el-form-item label="名称" v-if="membername">
                    <span>{{membername}}</span>
                  </el-form-item>
                  <el-form-item label="客户" prop="amount">
                    <el-select style="width: 100%;" v-model="memberName" :filter-method="remoteMethod" value-key="id"
                               filterable placeholder="请选择"
                               @change="selectMember">
                      <el-option
                        style="width: 600px;"
                        v-for="item in memberList"
                        :key="item.id"
                        :label="item.name"
                        :value="item">
                        <div style="display: flex">
                          <span style="width: 60px;">{{item.code}}</span>
                          <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                          <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>
                          <div style="width: 200px;">
                            <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>
                          </div>
                        </div>
                      </el-option>
                      <div style="height: 30px"></div>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="充值金额" prop="amount">
                    <el-input type="number" v-model="Recharge.amount" placeholder="请输入库存充值金额"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="memo">
                    <el-input v-model="Recharge.memo"></el-input>
                  </el-form-item>
                  <el-form-item label="实收金额">
                    <span style="color: red;">{{Recharge.agio!=0?Recharge.amount*Recharge.agio/10:Recharge.amount}}</span>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="Rechargeselect('Recharge')">确 定</el-button>
                  </el-form-item>
                </el-form>
            </div>
    </el-dialog>
  </el-container>
</template>

<script>
import queryShop from '@/components/Query/queryShop'
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import memberTable from '@/components/MemberTable/index'
import { list as sysMchList, getInfo } from '@/api/sysMch'
import productTable from '@/components/ProductList/productList'
import { EventBus } from '@/api/eventBus'
import orderList from './components/list'
import {add, list} from '@/api/deposit'
import Pagination from '@/components/Pagination'
import utils from '../../utils/utils.js'
import loadMore from '@/utils/more.js'
import { list as memberList } from '@/api/member'
import { list as productList } from '@/api/product'
import permission from '@/directive/permission/index.js' // 权限判断指令
import {list as tuilist} from '@/api/askfor'
import askforList from '../askfor/components/list'
import shippingList from '../shipping/components/list'
import { deliveryshippingList,summary } from '@/api/shippingSettle'
import deliverylist from '../shipping/components/deliverylist'

export default {
  name: 'agentrecharge-list',

  directives: { loadMore, permission, elDragDialog },
  activated() {
    this.payLoads = new Date().getTime()
  },
  data() {
    return {
      memberList:'',
      obtain:'',
      rules: {
        amount: [
          { required: true, message: '请输入充值金额', trigger: 'blur' },
        ],
        agio: [
          { required: true, message: '请输入充值折扣', trigger: 'blur' },
        ],
        memo: [
          { required: true, message: '请输入充值备注', trigger: 'blur' },
        ],
      },
      paymentPluginId:"debtPayPlugin",
      memberId:"",
      Account:"",
      membername:"",
      memberName1:"",
      dialogVisible:false,
      Recharge:{
        amount:"",
        agio:"",
        memo:""
      },
      ordercounnum:0,
      Tobedelivered:0,
      Tobeshipped:0,
      Tobeshippedhexiao:0,
      activeName:"全部订单",
      tioajian:'',
      song:"",
      pagesnum:"全部订单",
      footernater:'',
      selectsong:'',
      emoloyee:'',
      totalsong:false,
      shippingForm:[],
      shippingStatus:'',
      payLoads: '',
      orderForm: [],
      times: '',
      pageNum: 1,
      memberTableVisible: false,
      orderVisible: false,
      memberName: '',
      productName: '',
      pageSize: 20,
      total: 0,
      curHeight: null,
      tabsHeight: null,
      queryType: true,
      mchType: '',
      mchIdOptions: [],
      memberIdOptions: [],
      productOptions: [],
      paymentStatus: '', // 付款状态
      orderStatus: " ", // 订单状态
      status: " ", // 订单状态
      query: {
        date: [],
        information: '',
        memberId: '',
        //phone: '',
        productId: '',
        shopId:'',
        status:"",
        credit:""
      },
      completeEmployeeId:'',
      completeMemberId:'',
      completeStartDate:'',
      completeEndDate:'',
      completeProductId:'',
      keyword: {
        date: [],
        information: '',
        memberId: '',
        //phone: '',
        productId: '',
        shopId:''
      },
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  components: {
    queryShop,orderList, Pagination, memberTable, productTable,askforList,shippingList,deliverylist
  },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  created() {
    var _this = this
    this.loadMember('')
    this.loadMch()
    this.loadOrder()
    this.loadSysmch('')
    this.countclick()
    this.countslect()
    this.counthexiao()
    this.ordercount()
    EventBus.$on('order-add', res => { // 监听新增完毕
      // 更新列表数组
      _this.orderForm.splice(0, 0, res)
    })
    EventBus.$on('order-edit', res => { // 监听状态更新
      // 更新列表数组
      for (var i = 0; i < _this.orderForm.length; i++) {
        if (_this.orderForm[i].id == res.id) {
          _this.$set(this.orderForm, i, res)
        }
      }
    })
    EventBus.$on('order-delete', res => { // 监听订单删除
      this.loadOrder()
    })
    EventBus.$on('order-view', res => { // 监听订单删除
      // 更新列表数组
      for (var i = 0; i < _this.orderForm.length; i++) {
        if (_this.orderForm[i].id == res.id) {
          _this.$set(this.orderForm, i, res)
        }
      }
    })
  },
  watch: {
    async $route(newVal, oldVal){
      if (newVal.name=='order-add') {
        if (newVal != oldVal) {
          if (this.$route.query.id) {
            this.form.memberId = this.$route.query.id
            this.memberName = this.$route.query.name
            this.loadReceiver()
            this.loadShipping()
          }
        }
        if(!utils.isNull(newVal.query.memberphone)){
          if(newVal.query.memberphone!=oldVal.query.memberphone){
            console.log('电话号码不一样');
            this.memberphone=newVal.query.memberphone
            await this.loadMember(newVal.query.memberphone)
            if(this.memberList.length!=0){
              this.form.memberId = this.memberList[0].id;
              this.memberName=this.memberList[0].name
              this.loadShipping()
              this.loadReceiver();
              this.addProduct()
            }
          }
        }
      }
    },
    memberChose(newName, oldName) {
      if (newName.length == 0) {
        this.loadShipping()
      }
    }
  },
  mounted() {
    this.comeIn()
    this.beforeMount()
  },
  methods: {
    toAddMember() {
      this.memberVisible = true;
      this.times = new Date().getSeconds()
    },
    async  loadMember(query) {
      var _this = this
      let params = new URLSearchParams();
      params.append('keyword', query)
      await memberList(params).then(response => {
        console.log("这是客户信息");
        console.log(response);
        _this.memberList = response.data.data
        if(_this.memberList.length==0){
          this.memberphonetype=true
        }else{
          this.memberphonetype=false
        }
        if (_this.memberList.length > 4) {
          this.optionHeight = 'height:35px'
        } else {
          this.optionHeight = 'height:55px'
        }
      }).catch(error => {
        console.log('error!!')
      });
    },
    remoteMethod(query) {
      this.loadMember(query)
    },
    selectMember(data) {
      this.memberId = data.id;
    },
    selectMember1(data) {
      console.log(data,"321321")
      this.query.memberId = data.id;
    },
    handleClose(){
      this.dialogVisible=false
    },
    Rechargeselect(Recharge){
      this.$refs[Recharge].validate((valid) => {
        if (valid) {
          const params = new URLSearchParams()
          params.append('amount', this.Recharge.amount)
          params.append('agio', this.Recharge.agio)
          params.append('memo', this.Recharge.memo)
          params.append('memberId', this.memberId)
          params.append('paymentPluginId', this.paymentPluginId)
          params.append('type', '0')
          add(params).then(res=>{
            this.dialogVisible=false
            this.$message("充值成功")
            this.loadOrder()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    ordercount(){
      var _this = this
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('shippingStatus',0)
      params.append('status', 0)
      params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[0])
      params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[1])
      params.append('paymentStatus', _this.paymentStatus)
      params.append('keyword', _this.keyword.information)
      params.append('memberId', _this.keyword.memberId)
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      list(params).then(response => {
        console.log(response)
        this.ordercounnum=response.data.total
      }).catch(error => {
        console.log('error!!')
      })
    },
    counthexiao(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('shippingEmployeeId', _this.song)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('keyword', _this.keyword.information)
      params.append('shopId', _this.keyword.shopId)
      //params.append('phone', _this.keyword.phone)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus',3)
    },
    countslect(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('shippingEmployeeId', _this.song)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('keyword', _this.keyword.information)
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus',1)
    },
    countclick(){
      var _this=this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('shippingEmployeeId', _this.song)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('keyword', _this.keyword.information)
      params.append('shopId', _this.keyword.shopId)
      params.append('productId', _this.keyword.productId)
      params.append('shippingStatus',2)
    },
    queryShopClick(data){
      console.log(data)
      this.query.shopId = data.shopId
    },
    delivery(val){
      if(utils.isNull(val)){
        return '0.00'
      }else{
        return val.toFixed(2)
      }
    },
    totalOrder(){
      if(this.pagesnum=='全部订单'||this.pagesnum=='待审核'||this.pagesnum=='已确认'||this.pagesnum=='已完成'||this.pagesnum=='已关闭'){
        this.loadOrder()
      }
    },
    queryEmployee(query) {

      this.getEmployeeList(query)

    },
    getEmployeeList(query) {
      list().then(response => {
        console.log(response)
        this.emoloyee=response.data.data
        console.log(this.emoloyee,"emoloyee")

      }).catch(error => {
        console.log('error!!')
      })
    },
    deliveryaa(val){
      this.memberId=val
    },
    obtainshippingList(){
      var  _this=this
      let params = new URLSearchParams()
      params.append('status', 3)
      params.append('employeeId', _this.song)
      params.append('memberId', _this.keyword.memberId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      params.append('productId', _this.keyword.productId)
      _this.completeEmployeeId = _this.song;
      _this.completeMemberId = _this.keyword.memberId;
      _this.completeStartDate = this.keyword.date.length > 0 ? this.keyword.date[0] : '';
      _this.completeEndDate = this.keyword.date.length > 0 ? this.keyword.date[1] : '';
      _this.completeProductId = _this.keyword.productId;
      summary(params).then(res=>{
        console.log(res);
        this.deliveryForm=res.data[0]
      })
    },
    loadMch() {
      getInfo().then(res => {
        this.mchType = res.data.mchType
      })
    },
    changeSysMch() {
      this.loadOrder()
    },
    querySysmch(query) {
      this.loadSysmch(query)
    },
    loadSysmch(query) {
      sysMchList({ name: query }).then(res => {
        this.mchIdOptions = res.data.data.filter(val => {
          return val.mchType === 3 || val.mchType === 1
        })
      }).catch(err => {
        console.log(err)
      })
    },
    memberDouble(data) {
      this.memberName = data.name
      this.query.memberId = data.id
      this.memberId = data.id
      this.memberTableVisible = false
    },
    memberTableClose() {
      this.memberTableVisible = false
    },
    addProductClick(data) {
      if (data.length > 1) {
        this.productName = data[0].name
        this.query.productId = data[0].id
        this.orderVisible = false
        this.$message({
          message: '只能查询一个商品',
          offset: 120,
          center: true
        })
      } else {
        this.productName = data[0].name
        this.query.productId = data[0].id
      }
    },
    doubleClick(val) {
      this.productName = val.name
      this.query.productId = val.id
      this.orderVisible = false
    },
    orderClose() {
      this.orderVisible = false

    },
    toSearchMember() {
      this.memberTableVisible = true
    },
    toAddProduct() {
      this.orderVisible = true
    },

    changeProduct(data) {
      if(!utils.isNull(data)){
        this.productName = data.name
        this.query.productId = data.id
      }else {
        this.query.productId = ''
      }

    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 311//减去页面上固定高度height
            _this.tabsHeight = h - 381
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
            this.tabsHeight = h - 294
          }
        })()
      }
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224//减去页面上固定高度height
      this.tabsHeight = h - 294
    },
    loadOrder() {
      var _this = this
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('status', _this.status)
      params.append('credit', _this.query.credit)
      params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[0])
      params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[1])
      params.append('keyword', _this.keyword.information)
      params.append('memberId', _this.keyword.memberId)
      params.append('type', "0")
      list(params).then(response => {
        console.log(response)
        _this.orderForm = response.data.data
        _this.total = response.data.total
      }).catch(error => {
        console.log('error!!')
      })
    },
    loadTuiOrder() {
      var _this=this
      let params = new URLSearchParams();
      params.append('pageNum', this.pageNum);
      params.append('pageSize', this.pageSize);
      params.append('status', '');
      params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[0]);
      params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0? '': this.keyword.date[1]);
      params.append('keyword',this.keyword.information)
      params.append('memberId',this.keyword.memberId)
      params.append('shopId', _this.keyword.shopId)
      tuilist(params).then(response => {
        this.orderForm = response.data.data
        this.total=response.data.total
      })
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == false) {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 311//减去页面上固定高度height
        this.tabsHeight = h - 381
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h - 294
      }
    },
    getMemberList() { // 加载客户
      memberList().then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.memberIdOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    queryProduct(query) { // 查询商品
      this.productOptions = []
      productList({ keyword: query }).then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },

    getProductList() { // 加载商品
      productList().then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    queryClick() {
      console.log(this.pagesnum);
      console.log( this.keyword)
      this.keyword = this.query
      this.pageNum = 1
      if(this.pagesnum=='全部订单'||this.pagesnum=='待审核'||this.pagesnum=='已确认'||this.pagesnum=='已完成'||this.pagesnum=='已关闭'){
        this.loadOrder()
      }
    },
    resetClick() {
      this.query.date = []
      this.query.information = ''
      this.productName = ''
      this.memberName = ''
      this.query.memberId = ''
      this.query.phone = ''
      this.query.productId = ''
      this.keyword = this.query
      this.pageNum = 1
      this.loadOrder()
    },
    detailsClick(data) {
      console.log(data)
      this.$router.push({
        path: '/agentrecharge/view', query: { id: data.id ,memberId:data.memberId}
      })
    },
    // 充值
    Rechargeclick(val) {
      this.dialogVisible=true
      console.log(this.dialogVisible);
      this.dialogVisible=true
      this.Account=val.mobile
      this.membername=val.name
      this.Recharge.amount=''
      this.Recharge.agio=''
      this.Recharge.memo=''
      this.memberName=''
    },
    detailsClickone(data){
      this.$router.push({
        path: '/shipping/view', query: { id: data }
      })
    },
    detailsClicktwo(data){
      this.$router.push({
        path: '/askfor/view', query: {id: data}
      })
    },
    addClick() {
      this.$router.push({
        path: '/order/add?type=add'
      })
    },
    tabsClick(data) {
      var _this = this
      this.pagesnum=data.name
      if(data.name=='待发货'||data.name=='配送中'||data.name=='待核销'){
        this.selectsong=true

      }else{
        this.selectsong=false
      }
      if(data.name=='待核销'){
        _this.obtainshippingList()
        _this.obtain=true
      }else{
        _this.obtain=false
      }
      console.log(this.pagesnum)
      if(data.name=='待审核'){
        _this.paymentStatus = '' // 付款状态
        _this.shippingStatus = 0 // 配送状态
        _this.status = 0 // 订单状态
        this.loadOrder()
      }else if(data.name=='待发货')
      {
        _this.shippingStatus = 1
        _this.shippingloadOrder()
      }else if(data.name=='配送中'){
        _this.shippingStatus = 2
        _this.shippingloadOrder()
      }else if(data.name=='待核销'){
        _this.shippingStatus = 3 // 配送状态
        _this.shippingloadOrder()
      }else if(data.name=='已完成'){
        _this.status = 2 // 订单状态
        _this.loadOrder()
      }else if(data.name=='已退款'){
        _this.orderStatus= 1
        _this.loadTuiOrder()

      }else if(data.name=='已关闭'){
        _this.status = 3 // 订单状态
        _this.loadOrder()
      }else if(data.name=='已确认'){
        _this.status = 1 // 订单状态
        _this.loadOrder()
      }else if(data.name=='全部订单'){
        _this.status = '' // 订单状态
        this.loadOrder()
      }

    },
  }
}
</script>

<style scoped>
.app {
  height: 80px;
  width: 100%;
  display: flex;
  background-color: rgb(233, 235, 236);
}

.deliveryboy {
  height: 100%;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: rgb(245, 247, 250) 1px solid;
}

.content {
  height: 100%;
  width: 700px;
  display: flex;
  justify-content: space-around;

}

.content_one {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.summary {
  height: 100%;
  paddding-top: 40px;
  paddding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 20px;
  border-left: rgb(245, 247, 250) 1px solid;
}

.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}

.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.el-input__inner {
  width: 100% !important;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 150px;
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.span-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;}
.btn-bell-badge {
  width: 26px;
  height: 18px;
  margin-left:5px;
  line-height:18px;
  border-radius:15px;
  background:#ed4014;}
.num {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.Recharge .el-form-item {
  margin-bottom: 20px!important;
}
</style>






